<template>
	<view class="shop-page">


		<view class="padding10">

			<mescroll-body ref="mescrollRef" :height="windowHeight+'rpx'" @init="mescrollInit" @down="downCallback"
				@up="upCallback" :up="upOption" :down="downOption">
				<!-- 商品展示列表 -->

				<view class="productList flex-wrap-justifyBetween">
					<block v-for="(item,index) in list" :key="index">
						<view class="product" @click="navDetailPage(item)">
							<image class="productImg" :src="item.host_img[0]" mode=""></image>
							<view class="font-overflow2 margin-bottom_10rpx">
								{{item.name}}
							</view>
							
							<!-- 优惠券 -->
							<view class="flex-start">
								<view v-if="item.coupon_list.length" class="couponLabelRed font-overflow">
				
									{{totelName(item.coupon_list[0].discount_intensity)+'元优惠券'}}
								</view>
								<!-- 1允许积分抵现 2 不允许', -->
								<view v-if="item.buying_pattern==1" class="couponLabelOrange  font-overflow">
				
									积分+现金
								</view>
							</view>
							<!-- 销量 -->
							<view class="flex-between inventory">
								<view class="font-overflow">
				
									销量 {{item.sales_volume}}
								</view>
								<view class="font-overflow">
				
									库存 {{item.inventory}}
								</view>
							</view>
							<!-- 价格 -->
							<view class="price">
								<view class="font-overflow">
				
									￥ {{item.price}}
								</view>
				
							</view>
						</view>
				
					</block>
				</view>



			</mescroll-body>
		</view>

	</view>
</template>

<script>
	export default {
		components: {

		},
		data() {
			return {
				downOption: {
					auto: true
				},
				// 上拉配置项
				upOption: {
					auto: true
				},
				windowHeight: '',
				list: [],
				token: uni.getStorageSync('login').token,
				tabIndex: 1,
				searchVal: '',
				// 轮播图
				list: [],
				autoplay: true,
				interval: 3000,
				// 数据明细
				menuNavigationList: [{
						img: '../../static/会员卡商城加套餐卡/858.png',
						text: '谷类杂粮',
						type: 0
						// url: '/pages/statistics/index/index'
					},
					{
						img: '../../static/会员卡商城加套餐卡/Mask group-1.png',
						text: '新鲜油品',
						// url: '/pages/merchantConfiguration/merchantConfiguration',
						type: 9
					},
					{
						img: '../../static/会员卡商城加套餐卡/Mask group.png',
						text: '干菜类',
						type: 10
						// url: '/pages/withdrawal/withdrawa-account/withdrawa-account'
					},
					{
						img: '../../static/会员卡商城加套餐卡/8589.png',
						text: '生鲜水果',
						type: 11
						// url: '/pages/service-area/service-area'
					},

				],
				classifyId: '',
				classifyList: []
			}
		},
		onLoad(options) {

			if (options) {

				console.log(options)
				this.classifyId = options.id


			}
			uni.getSystemInfo({
				success: (res) => {
					this.windowHeight = res.windowHeight * 2 - 800;
				}
			});
		},
		onShow() {

			this.$nextTick(() => {
				this.mescroll?.resetUpScroll();
			})

		},
		created() {


		},
		mounted() {

			this.init()
		},
		computed: {
			totelName: function() {
				return function(num) {

					if (num >= 10000) {
						let remainder = num % 10000;
						let quotient = Math.floor(num / 10000);
						let decimal = Math.floor(remainder / 1000);
						console.log(quotient)
						return quotient + '.' + decimal + '万';
					} else {
						return num.toString();
					}
				};
			}
		},
		methods: {

			// 获取轮播图
			async init() {




			},
		
			async upCallback(scroll) {
				const result = await this.$http.post({
					url: this.$api.goodsList,
					data: {
						page: scroll.num,
						limit: 10,
						classify_id: Number(this.classifyId)
					},
					headers: {
						'Authorization': `Bearer ${this.token}`
					}
								
				})
					
								
				if (result.code == 0) {
				
					this.mescroll.endByPage(result.data.list.length, this.$sun.pagingSum(result.data.count, 10));
					if (scroll.num == 1) this.list = [];
					result.data.list.forEach((item)=>{
						item.host_img=item.host_img.split(',').map((item) => item.trim());
					})
					this.list = this.list.concat(result.data.list);
					
					console.log('this.list', this.list, this.list.length);
				}
				
			
			},
			// 点击轮播图
			clickSlideImg(e) {
				// 跳本地 ， 2 跳h5 ，3 跳小程序
				if (e.jump_way == 1) {
					this.$sun.toast('目前暂不支持本地跳转', 'none')
				} else if (e.jump_way == 2) {
					window.location.href = e.link
				} else {
					// 跳转小程序
					this.$sun.toast('跳转小程序', 'none')
				}
				console.log(e)
			},
			navDetailPage(items) {
				this.$sun.navGo('/pages/shop/shoplDetailsPage/shoplDetailsPage',{...items})
			}
		}
	}
</script>

<style lang="less" scoped>
	page {
		background: #fff;
	}

	.shop-page {
		background-color: #fff;

		.search-content {
			justify-content: center;
			display: flex;
			align-items: center;
			width: 700rpx;
			height: 88rpx;
			margin: 30rpx;
			background: #f6f6f6;
			border-radius: 84rpx;

			.search-img {
				width: 30rpx;
				height: 30rpx;
				margin-right: 20rpx;
				margin-left: 40rpx;
			}

			.icon_close {
				padding: 0rpx 15rpx;
				width: 36rpx;
				height: 36rpx;
				margin-right: 30rpx;
			}
		}
	}

	.padding10 {
		padding: 0 20rpx;

		.productList {
			margin-top: 40rpx;

			.product {
				width: 336rpx;
				margin-bottom: 15rpx;

				.productImg {
					width: 336rpx;
					height: 336rpx;
				}

				.couponLabelRed {
					padding: 0 10rpx;

					max-width: 160rpx;
					height: 45rpx !important;
					line-height: 45rpx;
					text-align: center;
					font-size: 24rpx;
					font-weight: 400;
					height: 38rpx;
					background-color: rgb(255, 238, 238);
					color: rgb(255, 0, 0);
				}

				.couponLabelOrange {
					padding: 0 10rpx;
					margin-left: 20rpx;
					max-width: 160rpx;
					height: 45rpx !important;
					line-height: 45rpx;
					text-align: center;
					font-size: 24rpx;
					font-weight: 400;
					height: 38rpx;
					background-color: rgb(255, 248, 238);
					color: rgb(255, 149, 0);
				}

				.inventory {
					margin: 10rpx 0;
					font-size: 24rpx;
					font-weight: 400;
					color: rgb(153, 153, 153);
				}

				.price {
					color: rgb(255, 0, 0);
				}
			}
		}

		.productClassification {
			margin-top: 36rpx;

			.avaterIcon {
				width: 102rpx;
				height: 102rpx;
				margin-bottom: 14rpx;
			}
		}
	}
</style>